<template>
  <div>
    <div>
      <Breadcrumb
        style="margin-right: 20px;"
        :router-list="historyRoute"
        @deleteOtherRoute="deleteOtherRouteMethods"
        ref="BreadcrumbRef"
      ></Breadcrumb>
      <FileContentSearchHeader
        addButtonText="添加"
        :searchList="['mediaName']"
        :need-list="['search', 'addButton', 'delete']"
        add-button-text="添加"
        @startUploadFile="startUploadFile"
        @changeSearch="changeSearchMethods"
        @mutiSendFile="mutiSendFileMethods"
        @mutiDel="mutiDelHandler"
      ></FileContentSearchHeader>
    </div>

    <CommonTable
      style="margin-top: 15px;"
      class="commonTable"
      ref="captionsTableRef"
      :is-selection="true"
      :is-show-index="true"
      :is-has-opera="true"
      :t-column-data="captionsListCol"
      :remote-api="getCaptionsList"
      :query-params="searchObj"
      :is-reserve-select="true"
      @changeRow="changeRowMethods"
    >
      <template slot="media_name" slot-scope="scope">
        <!--文件夹-->
        <div v-html="scope.row.title"></div>
      </template>
      <template slot="content" slot-scope="scope">
        <!--文件夹-->
        <div :ref="`content-${scope.row.id}`" v-html="scope.row.content"></div>
      </template>
      <template slot="media_type" slot-scope="scope">
        {{scope.row.file_type == '1'? '文件夹': '字幕'}}
      </template>
      <template slot="is_open" slot-scope="scope">
        {{scope.row.open == '1'? '是': '否'}}
        <el-button type="text" @click="controlDm(scope.row)" v-if="scope.row.open == '1'">关闭</el-button>
        <el-button type="text" @click="controlDm(scope.row)" v-if="scope.row.open == '0'">开启</el-button>
      </template>
      <template slot="operate" slot-scope="scope" class="operate-btn">
        <el-button type="text" @click="showZmEdit(scope.row)">编辑</el-button>
        <el-button type="text" class="del-button" @click="showDelDmWarn(scope.row)">删除</el-button>
      </template>
    </CommonTable>

    <CaptionsForm
      ref="CaptionsFormRef"
      :show="isShowCaptionsForm"
      @close="isShowCaptionsForm=false"
      @on-success="saveCaptionsCall"
    ></CaptionsForm>

    <WarnPanelDialog
      warnTitle="编辑提示"
      :warnContent="openMsg"
      :status-prop="isShowWarning"
      @confirmHandler="confirmMethods"
      @cancelHandler="cancelMethods"
    />

    <WarnPanelDialog
      :status-prop="isShowDelWarning"
      @confirmHandler="confirmDmDelMethods"
      @cancelHandler="cancelDelMethods"
    />
  </div>
</template>

<script>
import VueDragResize from 'vue-drag-resize'
import Breadcrumb from './component/breadThump.vue'
import CommonTable from "@/components/Table/commonTable";
import UploadDialog from "@/components/UploadFile/index"
import CaptionsForm from "@/views/captions/component/captionsForm.vue";
import Mixins from "@/views/distribute/mixins/mixins";
import {captionsListCol} from './tableCol/captionsListCol'
import * as service from './service'
import {sendCmd} from "@/views/terminalDetail/utils/sendCmd";
import * as clientService from '@/views/terminal/service'
import {getClientList} from "@/views/terminal/service";
export default {
  mixins: [Mixins],
  components: {
    CaptionsForm,
    VueDragResize
  },
  data() {
    return {
      isShowDelWarning: false,
      openMsg: '',
      isShowCaptionsForm: false,
      getCaptionsList: service.getCaptionsList,
      captionsListCol,
      searchObj: {
        title: '',
        clientId: '',
        page: 1,
        pageSize: 20
      },
      delDmList: [],
      isShowWarning: false,
      clickCache: {},
      delClickCache: {},
      clientList: [],
      dmStyleCache: []
    }
  },
  mounted() {
    this.getClientList()
    this.getList()
  },
  methods: {
    getClientList() {
      clientService.getClientList({page: 1, pageSize: 2000}).then((res) => {
        this.clientList = res.data.records.slice()
      })
    },
    cancelMethods() {
      this.isShowWarning = false
    },
    cancelDelMethods() {
      this.isShowDelWarning = false
    },
    showZmEdit(row) {
      this.isShowCaptionsForm = true
      this.$refs.CaptionsFormRef.toggleRows(row)
    },
    showDelDmWarn(row) {
      this.delClickCache = {
        ...row
      }
      this.isShowDelWarning = true
    },
    confirmMethods() {
      const findClientIndex = this.clientList.findIndex((result) => {
        return result.id == this.clickCache.client_id
      })
      if(findClientIndex !== -1) {
        this.clickCache.clientDetail = {
          ...this.clientList[findClientIndex]
        }
      }
      // 发送弹幕指令
      if(this.clickCache.open) {
        sendCmd('captions', 'close', this.clickCache)
      } else {
        sendCmd('captions', 'open', this.clickCache)
      }
      const params = {
        id: this.clickCache.id,
        open: this.clickCache.open == 1?0: 1,
      }
      service.saveCaption(params).then(() => {
        this.$message.success('操作成功')
        this.getList()
        this.isShowWarning = false
      })
    },
    confirmDmDelMethods() {
      if(this.delDmList.length > 0) {

      } else {
        const params = {
          ids: [this.delClickCache.id]
        }
        service.delCaption(params).then(() => {
          this.$message.success('删除成功')
          this.getList()
          this.isShowDelWarning = true
        })
      }
    },
    changeRowMethods(rows) {
      this.delDmList = [...rows]
    },
    getList() {
      const params = Object.assign({}, this.searchObj)
      this.$refs.captionsTableRef.queryData(params)
    },
    startUploadFile() {
      this.isShowCaptionsForm = true
    },
    changeSearchMethods(params) {
      this.searchObj.title = params.mediaName
      this.getList()
    },
    saveCaptionsCall() {
      this.getList()
      this.isShowCaptionsForm = false
    },
    getStyleByTag(node) {
      const styleList = ['backgroundColor', 'color']
      styleList.forEach((item) => {
        if(node.style[item] !== '') {
          let tmp = {
            name: item,
            value: node.style[item]
          }

          this.dmStyleCache.push(tmp)
        }
      })
      if(node.children && node.children.length > 0) {
        this.getStyleByTag(node.children[0])
      }
    },
    controlDm(row) {
      if(row.open == 1) {
        this.openMsg = '是否关闭弹幕'
      } else {
        this.openMsg = '是否开启弹幕'
      }

      const dom = this.$refs[`content-${row.id}`]
      this.dmStyleCache = []
      this.getStyleByTag(dom)

      this.clickCache = {
        ...row
      }

      this.isShowWarning = true
    }
  }
}
</script>

<style scoped lang="scss">

</style>
